<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>运动一</title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			div{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				top: 50px;
				left: 50px;
			}
		</style>
		<script type="text/javascript">
			//距离 时间 速度
			window.onload = function()
			{
				var oBox = document.getElementById('box');
				var left = 50;
				
				document.onclick = function()
				{
					var timer = setInterval(function(){
						left+=10;
						
						oBox.style.left = left+'px';
						
						if (left == 500){
							clearInterval(timer);
						}
					},30);
				}
			}
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>
